<template>
  <div>
    <!-- 导航位置 -->
    <div>
      <van-nav-bar
        title="我的订单"
        @click-left="goMy()"
        left-text="返回"
        left-arrow
      >
      </van-nav-bar>
    </div>
    <!-- 内容区 -->
    <div>
      <Bg class="">
        <!-- 引入tab组件 -->
        <van-tabs @click="findOrder()" v-model="active" class="all">
          <!-- 全部订单部分 -->
          <van-tab title="全部">
            <!-- 包裹所有订单的盒子  当订单太多时, 用于做滚动条 -->
            <div class="content">
              <!-- 每条订单的记录 -->
              <div
                class="list"
                v-for="(item, index) in OrderDatas"
                :key="index"
              >
                <!-- 订单的id和订单的状态 -->
                <div class="ProidAndStatusBox">
                  <!-- 订单的id -->
                  <div class="Proid">{{ item.oid }}</div>
                  <!-- 订单的状态 -->
                  <div
                    class="status"
                    v-if="item.status === 1"
                    @click="receive(item.oid)"
                  >
                    确认订单
                  </div>
                  <div
                    class="status"
                    v-if="item.status === 2"
                    @click="removeOrder(item.oid)"
                  >
                    已完成
                    <van-icon name="delete" />
                  </div>
                </div>
                <ProList
                  :isHasCheckbox="false"
                  v-for="(item2, index2) in item.data"
                  :key="index2"
                  :proData="item2"
                >
                  <div>x{{ item2.count }}</div>
                </ProList>
                <!-- 用于制作订单分割线 -->
                <div class="dividing"></div>
                <div class="Order_Info">
                  <div class="Order_time">2021-20-20 15:05:15</div>
                  <div class="Order_num_price">
                    <div class="Order_num">共计 {{ item.num }} 件</div>
                    <div class="Order_price">合计 &yen; {{ item.total }}</div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <!-- 进行中的订单 -->
          <van-tab title="进行中">
            <!-- 包裹所有订单的盒子  当订单太多时, 用于做滚动条 -->
            <div class="content">
              <!-- 每条订单的记录 -->
              <div
                class="list"
                v-for="(item, index) in OrderDatas"
                :key="index"
              >
                <!-- 订单的id和订单的状态 -->
                <div class="ProidAndStatusBox">
                  <!-- 订单的id -->
                  <div class="Proid">{{ item.oid }}</div>
                  <!-- 订单的状态 -->
                  <div class="status" v-if="item.status === 1"  @click="receive(item.oid)">确认订单</div>
                  <div
                    class="status"
                    v-if="item.status === 2"
                    @click="removeOrder(item.oid)"
                  >
                    已完成
                    <van-icon name="delete" />
                  </div>
                </div>
                <ProList
                  :isHasCheckbox="false"
                  v-for="(item2, index2) in item.data"
                  :key="index2"
                  :proData="item2"
                >
                  <div>x{{ item2.count }}</div>
                </ProList>
                <!-- 用于制作订单分割线 -->
                <div class="dividing"></div>
                <div class="Order_Info">
                  <div class="Order_time">2021-20-20 15:05:15</div>
                  <div class="Order_num_price">
                    <div class="Order_num">共计 {{ item.num }} 件</div>
                    <div class="Order_price">合计 &yen; {{ item.total }}</div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <!-- 已完成的订单 -->
          <van-tab title="已完成">
            <!-- 包裹所有订单的盒子  当订单太多时, 用于做滚动条 -->
            <div class="content">
              <!-- 每条订单的记录 -->
              <div
                class="list"
                v-for="(item, index) in OrderDatas"
                :key="index"
              >
                <!-- 订单的id和订单的状态 -->
                <div class="ProidAndStatusBox">
                  <!-- 订单的id -->
                  <div class="Proid">{{ item.oid }}</div>
                  <!-- 订单的状态 -->
                  <div class="status" v-if="item.status === 1">确定订单</div>
                  <div
                    class="status"
                    v-if="item.status === 2"
                    @click="removeOrder(item.oid)"
                  >
                    已完成
                    <van-icon name="delete" />
                  </div>
                </div>
                <ProList
                  :isHasCheckbox="false"
                  v-for="(item2, index2) in item.data"
                  :key="index2"
                  :proData="item2"
                >
                  <div>x{{ item2.count }}</div>
                </ProList>
                <!-- 用于制作订单分割线 -->
                <div class="dividing"></div>
                <div class="Order_Info">
                  <div class="Order_time">2021-20-20 15:05:15</div>
                  <div class="Order_num_price">
                    <div class="Order_num">共计 {{ item.num }} 件</div>
                    <div class="Order_price">合计 &yen; {{ item.total }}</div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </Bg>
    </div>
  </div>
</template>

<script>
// 导入商品列表
import ProList from "../components/ProList";
// 导入背景
import Bg from "../components/Bg";
export default {
  name: "MyOrder",
  components: {
    //   注册背景组件
    Bg,
    // 注册商品列表组件
    ProList,
    // 控制跳转
    bb: "",
  },
  data() {
    return {
      // 用于切换商品状态
      active: 0,
      // 查询全部订单接口处理后的数据
      OrderDatas: [],
    };
  },
  created() {
    this.bb = this.$route.query.bb
    this.findOrder();
  },
  methods: {
    // 返回我的页面
    goMy() {
      if (!this.bb) {
        this.$router.push({ name: "My" });
      }else{
          this.$router.push({name:"Shopbag"})
      }
    },

    // 调用我的订单的接口
    findOrder() {
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          tokenString,
          status: this.active,
        },
      })
        .then((res) => {
          
          // 获取数据成功
          if (res.data.code === 70000) {
            // 定义一个空数组 用于分类订单
            let oid = [];
            // 遍历res.data.result数据  将重复的oid去掉
            res.data.result.forEach((v) => {
              // 修改图片的建明
              v.small_img = v.smallImg;
              delete v.smallImg;
              // 判断是否存在oid
              if (oid.indexOf(v.oid) === -1) {
                // 不存在则push进oid数组里面
                oid.push(v.oid);
              }
            });

            let OrderDatas = [];
            oid.forEach((v1) => {
              let OrderData = {
                // oid
                oid: v1,
                // 商品的状态
                status: "",
                // 商品的总数量
                num: 0,
                // 商品的总价格
                total: 0,
                // 每条商品的数据
                data: [],
                // 每条订单的事件
                time: "",
              };
              // 遍历res.data.restlt数据
              res.data.result.forEach((v2) => {
                // 判断oid是否重复
                if (v1 === v2.oid) {
                  // 如果该条订单没有订单则添加时间
                  if (!OrderData.time) {
                    OrderData.time = v2.createdAt;
                  }
                  // 重复的话  直接将该数据push进OrderData里面的data
                  OrderData.data.push(v2);
                  // 将数据的状态码存入OrderData
                  OrderData.status = v2.status;
                  // 将每条数据的总量相加
                  OrderData.num += v2.count;
                  // 将每条数据的价格相加
                  OrderData.total += v2.count * v2.price;
                }
              });
              OrderDatas.push(OrderData);
            });
            this.OrderDatas = OrderDatas;
            
          }
        })
        .catch((err) => {
          
        });
    },

    // 确认订单
    receive(oid) {
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      this.axios({
        method: "post",
        url: "/receive",
        data: {
          tokenString,
          oid,
        },
      })
        .then((res) => {
          
          this.$toast(res.data.msg);
          if (res.data.code === 80000) {
            this.findOrder();
          }
        })
        .catch((err) => {
          
        });
    },

    // 删除订单
    removeOrder(oid) {
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");
      this.axios({
        method: "post",
        url: "/removeOrder",
        data: {
          tokenString,
          oid,
        },
      })
        .then((res) => {
          
          this.$toast(res.data.msg);
          if (res.data.code === 90000) {
              this.findOrder();
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// Bg组件样式  给定位微调位置
.c_content {
  position: relative;
  // tag组件  配个Bg组件样式微调位置
  .all {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    // 包裹所有订单的盒子  当订单太多时, 用于做滚动条
    .content {
      width: 95%;
      position: fixed;
      top: 205px;
      right: 0;
      left: 0;
      bottom: 10px;
      margin: 0 auto;
      background: #f0f0f0;
      overflow-y: auto;
      // 每条商品的样式
      .list {
        margin-top: 10px;
        background: #fff;
        padding-top: 10px;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        // 订单的id和订单的状态
        .ProidAndStatusBox {
          display: flex;
          justify-content: space-between;
          font-size: 15px;
          color: #666;
          padding: 0 5px;
          box-sizing: border-box;
        }
        // 分割线样式
        .dividing {
          border-bottom: 1px dashed #777;
          position: relative;
          &::after {
            content: "";
            width: 20px;
            height: 20px;
            display: inline-block;
            background: #f0f0f0;
            border-radius: 20px;
            position: absolute;
            top: -10px;
            left: -10px;
          }
          &::before {
            content: "";
            width: 20px;
            height: 20px;
            display: inline-block;
            background: #f0f0f0;
            border-radius: 20px;
            position: absolute;
            top: -10px;
            right: -10px;
          }
        }
        // 订单信息 时间  件数  总金额
        .Order_Info {
          margin-top: 15px;
          padding: 0 10px;
          font-size: 12px;
          .Order_num_price {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            .Order_price {
              font-size: 13px;
              color: blue;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>